<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/laypage.css">
<script type="text/javascript" src="js/jquery/jquery.min.js"></script>
<script type="text/javascript" src="js/laypage/laypage.js"></script>
<script type="text/javascript" src="js/layer/layer.js"></script>
<script type="text/javascript" src="js/vue/vue.min.js"></script>
<script type="text/javascript" src="js/jquery.validation/1.14.0/jquery.validate.min.js"></script>
<style>
    input.error {
        border: 1px solid red;
    }
</style>
<body>
<div class="container">
    <form id="addDeptForm">
        <br/>
        <div class="form-group">
            <label for="dname">部门名称：</label>
            <input type="text" class="form-control" id="dname" name="dname" placeholder="输入名称">
        </div>
        <div class="form-group">
            <label for="loc">部门地址：</label>
            <input type="text" class="form-control" id="loc" name="loc" placeholder="输入地址">
        </div>
        <div class="form-group">
            <button type="button" id="saveBtn" class="btn btn-success">提交</button>
            <button type="button" id="cancelBtn" class="btn btn-default">取消</button>
        </div>
    </form>
</div>
</body>
</html>
<script>
    //添加addDept
    var addDept = function () {
        if(!check().form()){
            return ;
        }
        $.ajax({
            type:'GET',
            dataType:'json',
            url:'/json/addDept',
            data:{
                dname:$("#dname").val(),
                loc:$("#loc").val()
            },
            success:function () {
                $("#cancelBtn").click()
            }
        });
    }
    //关闭遮罩层，更新页面信息
    $("#cancelBtn").on("click",function () {
            var index = parent.layer.getFrameIndex(window.name);
        //更新页面信息
        /*parent.getDeptPageList();*/
        parent.layer.close(index);
    })
    //点击提交按钮触发事件
    $("#saveBtn").on("click",function () {
        addDept();
    });

    function check() {
        return $("#addDeptForm").validate({
            rules : {
                dname : {
                    required:true
                },
                loc : {
                    required:true
                }
            },
            messages:{
                dname : {
                    required : ""
                },
                loc : {
                    required : ""
                }
            }
        })
    }

</script>